<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" />
<meta name="copyright" content="">
<meta name="author" content="">
<title>报考资格测评</title>
<!-- <link rel="stylesheet" href="./static/css/style.css"> -->
<link rel="stylesheet" href="./static/css/element-ui.css">
<script src="./static/js/basic.js"></script>
<script src="./static/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./static/js/swiper-4.5.3.min.js"></script>
<link rel="stylesheet" href="./swiper/swiper.min.css" />
<script src="./static/js/element-ui.js"></script>
<script src="./static/js/js.js"></script>
</head>

<body>
  <div id="app" class="test">
    <my-header :type="3">
      <template v-if="con">
        
        <div class="main main1 box">
          <div class="test-tit">选择<b class="b">学生性别</b></div>
          <dl class="tx-box flex-bect">
            <dd v-for="(item, i) in con.gender" class="item" :class="'tx'+i">
              <div class="tx" @click="ruleForm.gender = item.id"><img :src="item.id === ruleForm.gender ? item.ico2 : item.ico1" class="img1" alt=""></div>
              <div class="name">{{item.name}}</div>
            </dd>
          </dl>
          <div class="form">
            <div class="hi"><b class="inbk">Hi</b><span class="inbk sp">你好！</span></div>
            <el-form :model="ruleForm" ref="ruleForm" label-width="140px" class="demo-ruleForm">
              <el-form-item label="请问您叫：" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请填写您的姓名"></el-input>
              </el-form-item>
              <el-form-item label="联系方式：" prop="mobile">
                <el-input v-model="ruleForm.mobile" placeholder="请填写您的手机号码"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 选择  学生入学年级 -->
        <div class="main main2 box">
          <div class="test-tit">选择<b class="b">学生入学年级</b></div>
          <dl class="list">
            <dd v-for="item in con.njList" :key="item.id" class="item ease cur" :class="{on : ruleForm.grade === item.id}" @click="ruleForm.grade = item.id">{{item.name}}</dd>
          </dl>
        </div>
        <div class="main main3 box">
          <div class="test-tit">选择<b class="b">报考地区</b></div>
          <div class="list flex-bect">
            <div class="flex-ct le">
              <dl>
                <dd v-for="(item, i) in con.city" :key="item.id" class="item cur" :class="{on : ruleForm.city === item.id}" @click="getCity(i, item.id)">{{item.name}}</dd>
              </dl>
            </div>
            <div class="ri flex1 flex-ct">
              <dl>
                <dd v-for="item in con.city[cityIdx].list" :key="item.id" class="item cur" :class="{on : ruleForm.area === item.id}" @click="ruleForm.area = item.id">{{item.name}}</dd>
              </dl>
            </div>
          </div>
        </div>
        
          <!-- 学生户籍学籍情况 -->
        <div class="main main4 box">
          <div class="test-tit">选择<b class="b">  学生户籍学籍情况</b></div>
          <dl class="list">
            <dd v-for="(item, i) in con.xuestatus" :key="i" class="item cur" :class="[item.name == ruleForm.status ? 'on':'', i%2 === 1 ? 'fl':'fr']" @click="ruleForm.status = item.name">{{item.name}}</dd>
            <dt class="textarea">
              <span class="lab inbk">备注：</span><el-input type="textarea" class="text" v-model="ruleForm.remark" placeholder="可填写学生户籍/学籍特殊情况"></el-input>
            </dt>
          </dl>
        </div>
        <div class=" main5 box ov">
          <dl class="fl main le">
            <dt class="test-tit">选择<b class="b">学生英文水平情况</b></dt>
            <dd class="item ov">
              <span class="name fl">有雅思成绩</span>
              <div class="w2 fl ov"><span class="sp fl">分数：</span><el-input class="text fl" v-model="ruleForm.IELTS"></el-input></div>
            </dd>
            <dd class="item ov">
              <span class="name fl">有托福成绩</span>
              <div class="w2 fl ov"><span class="sp fl">分数：</span><el-input class="text fl" v-model="ruleForm.TOEFL"></el-input></div>
            </dd>
            <dd class="item ov">
              <span class="name fl">SAT/SSAT成绩</span>
              <div class="w2 fl ov"><span class="sp fl">分数：</span><el-input class="text fl" v-model="ruleForm.SAT"></el-input></div>
            </dd>
          </dl>
          <dl class="fr main ri">
            <dt class="test-tit">选择<b class="b">走读寄宿要求</b></dt>
            <dd v-for="(item, i) in con.live" :key="i" class="item cur" :class="[item.name == ruleForm.live ? 'on':'']" @click="ruleForm.live = item.name">{{item.name}}</dd>
          </dl>
        </div>
        
        <div class="cur submit-btn flex-ct" @click="submitForm()">提交测评结果</div>
        
        <div class="bottom">职教招生网-智途教育（北京）教育有限公司（技术支持） 京ICP备15024715号-12</div>
      </template>
    </my-header>
  </div>
  
  <script type="text/babel">
    let router = getPath(); // 所有路径
    var time = new Date().getTime();
    new Vue({
      el: '#app',
      components: {
        'my-header': httpVueLoader('./components/header.vue?time='+time),
        'gj-common': httpVueLoader('./components/gj_common.vue?time='+time),
        'gj-main2': httpVueLoader('./components/gj_main2.vue?time='+time),
      },
      data:{
        router:router, // 路径
        con:null,
        ruleForm:{
          gender:1, // 性别
          name:"", // 姓名
          mobile:"", // 手机号
          grade:1, // 年级
          city:1, // 城市
          area:'', // 地区
          remark:"", // 备注
          status:"", // 学籍
          IELTS:"", // 雅思成绩
          TOEFL:"", // 托福成绩
          SAT:"", //
          live:"", // 寄宿情况
        },
        cityIdx:0, // 当前的城市下标
      },
      mounted() {
        this.getCon()
      },
      
      methods: {
        getCity(i, id){
          this.ruleForm.city = id
          this.cityIdx = i
        },
        getCon(){
          const item1 = [
            {id:1, name:"海淀区"}, {id:2, name:"朝阳区"}, {id:3, name:"大兴区"}, {id:4, name:"昌平区"}, {id:5, name:"通州区"},
          ]
          const item2 = [
            {id:6, name:"石景山区"}, {id:7, name:"东城区"}, {id:8, name:"西城区"}, {id:9, name:"丰台区"}, {id:10, name:"房山区"},
          ]
          const item3 = [
            {id:11, name:"顺义区"}, {id:12, name:"怀柔区"}, {id:13, name:"门头沟"}, {id:14, name:"平谷区"}, {id:15, name:"密云区"},
          ]
          const item4 = [
            {id:16, name:"延庆区"}
          ]
          
          this.con = {
            gender:[
              {id:1, name:"男", ico1:"./static/image/test/tx1.png", ico2:"./static/image/test/tx1on.png"},
              {id:2, name:"女", ico1:"./static/image/test/tx2.png", ico2:"./static/image/test/tx2on.png"}
            ],
            njList:[
              {id:1, name:"幼儿园"},{id:2, name:"学前班"},{id:3, name:"一年级"},{id:4, name:"二年级"},{id:5, name:"三年级"},
              {id:6, name:"四年级"},{id:7, name:"五年级"},{id:8, name:"六年级"},{id:9, name:"七年级"},{id:10, name:"八年级"},
              {id:11, name:"九年级"},{id:12, name:"十年级"},{id:13, name:"十一年级"},{id:14, name:"十二年级"}
            ],
            city:[
              {id:1, name:"北京", list:[...item1, ...item2, ...item3, ...item4]},
              {id:2, name:"河北", list:[...item2, ...item3, ...item4, ...item1]},
              {id:3, name:"天津", list:[...item3, ...item4, ...item2, ...item1]},
              {id:4, name:"山东", list:[...item4, ...item2, ...item1, ...item3]},
              {id:5, name:"四川", list:[...item3, ...item2, ...item4, ...item1]},
              {id:6, name:"广东", list:[...item2, ...item4, ...item1, ...item3]}
            ],
            
            xuestatus:[
              {id:1, name:"一、有报考地区户籍和学籍"},
              {id:2, name:"二、没有报考地区户籍有本市学籍"},
              {id:3, name:"三、有报考地区户籍没有本市学籍"},
              {id:4, name:"四、没有报考地区户籍和学籍"}
            ],
            live:[
              {id:1, name:"没有寄宿需求"},
              {id:2, name:"不方便每天接送，考虑能寄宿的学校"},
              {id:3, name:"短时间没有寄宿需求，但之后可能会"}
            ]
          }
          
          
        },
        // 用户信息搜索
        submitForm(formName) {
          const { gender, name, mobile,  grade,  city, area, remark, status, IELTS, TOEFL, SAT, live} = this.ruleForm
          if(name === '') return this.$message.error('姓名不能为空！');
          if(mobile === '') return this.$message.error('手机号不能为空！');
          if(area === '') return this.$message.error('报考地区不能为空！');
          if(status === '') return this.$message.error('学生户籍学籍情况不能为空！');
          if(IELTS === '') return this.$message.error('雅思成绩不能为空！');
          if(TOEFL === '') return this.$message.error('托福成绩不能为空！');
          if(SAT === '') return this.$message.error('SAT/SSAT成绩不能为空！');
          if(live === '') return this.$message.error('寄宿情况不能为空！');
          console.log(this.ruleForm)
        },
      }
    })
  </script>
  <link rel="stylesheet" href="https://www.9-xin.com/css/animate.min.css" />
  <script type="text/javascript" src="https://www.9-xin.com/js/wow.min.js"></script>
  <script>
      var wow = new WOW({
          boxClass: 'wow',
          animateClass: 'animated',
          offset: 0,
          mobile: false,
          live: true
      });
      wow.init();
  </script>
  
</body>
</html>